import React from 'react';
import { ComponentType } from '@/types/component-type';
import Icon, { QuestionCircleOutlined } from '@ant-design/icons';
import {
  Affix,
  Alert,
  Anchor,
  App,
  AutoComplete,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Calendar,
  Card,
  Carousel,
  Cascader,
  Checkbox,
  Collapse,
  ColorPicker,
  ConfigProvider,
  DatePicker,
  Descriptions,
  Divider,
  Drawer,
  Dropdown,
  Empty,
  Flex,
  FloatButton,
  Form,
  Image,
  Input,
  InputNumber,
  Layout,
  List,
  Mentions,
  Menu,
  message,
  Modal,
  notification,
  Pagination,
  Popconfirm,
  Popover,
  Progress,
  QRCode,
  Radio,
  Rate,
  Result,
  Segmented,
  Select,
  Skeleton,
  Slider,
  Space,
  Spin,
  Statistic,
  Steps,
  Switch,
  Table,
  Tabs,
  Tag,
  Timeline,
  TimePicker,
  Tooltip,
  Tour,
  Transfer,
  Tree,
  TreeSelect,
  Typography,
  Upload,
  Watermark,
} from 'antd';
import { IconFont } from '@/components/IconFont';
import { IconFontSelect } from '@/components/IconFontSelect';
import { DraggableModal } from '@/components/DraggableModal';

interface AutoRenderComponentType {

}

class AutoRenderComponent {
  constructor(options?: AutoRenderComponentType) {
  }

  public render(type: ComponentType, props?: any): any {
    switch (type) {
      // 通用
      case 'button':
        return <Button type="primary" children="default" { ... props } />;
      case 'float-button':
        return <FloatButton { ... props } />;
      case 'icon':
        return <Icon viewBox="v" component={ () => <>x</> } { ... props } />;
      case 'typography':
        return <Typography { ... props } />;
      // 布局
      case 'divider':
        return <Divider { ... props } />;
      case 'flex':
        return <Flex { ... props } >{ props?.children }</Flex>;
      case 'grid':
        throw new Error('use row/col.');
      case 'layout':
        return <Layout { ... props } />;
      case 'space':
        return <Space { ... props } />;
      // 导航
      case 'anchor':
        return <Anchor { ... props } />;
      case 'breadcrumb':
        return <Breadcrumb { ... props } />;
      case 'dropdown':
        return <Dropdown { ... props } />;
      case 'menu':
        return <Menu { ... props } />;
      case 'pagination':
        return <Pagination { ... props } />;
      case 'steps':
        return <Steps { ... props } />;
      // 数据录入
      case 'auto-complete':
        return <AutoComplete { ... props } />;
      case 'cascader':
        return <Cascader { ... props } />;
      case 'checkbox':
        return <Checkbox { ... props } />;
      case 'color-picker':
        return <ColorPicker { ... props } />;
      case 'date-picker':
        return <DatePicker { ... props } />;
      case 'date-range-picker':
        return <DatePicker.RangePicker { ... props } />;
      case 'form':
        return <Form { ... props } />;
      case 'input':
        return <Input allowClear { ... props } />;
      case 'password':
        return <Input.Password allowClear { ... props } />;
      case 'email':
        return <Input allowClear { ... props } type={ 'email' } />;
      case 'textarea':
        return <Input.TextArea allowClear rows={ 3 } { ... props } />;
      case 'input-number':
        return <InputNumber { ... props } />;
      case 'mentions':
        return <Mentions { ... props } />;
      case 'radio':
        return <Radio.Group { ... props } />;
      case 'rate':
        return <Rate { ... props } />;
      case 'select':
        return <Select allowClear { ... props } />;
      case 'slider':
        return <Slider { ... props } />;
      case 'switch':
        return <Switch { ... props } />;
      case 'time-picker':
        return <TimePicker { ... props } />;
      case 'time-range-picker':
        return <TimePicker.RangePicker { ... props } />;
      case 'transfer':
        return <Transfer { ... props } />;
      case 'tree-select':
        return <TreeSelect { ... props } />;
      case 'upload':
        return <Upload { ... props } />;
      // 数据展示
      case 'avatar':
        return <Avatar { ... props } />;
      case 'badge':
        return <Badge { ... props } />;
      case 'calendar':
        return <Calendar { ... props } />;
      case 'card':
        return <Card { ... props } />;
      case 'carousel':
        return <Carousel { ... props } />;
      case 'collapse':
        return <Collapse { ... props } />;
      case 'descriptions':
        return <Descriptions { ... props } />;
      case 'empty':
        return <Empty { ... props } />;
      case 'image':
        return <Image { ... props } />;
      case 'list':
        return <List { ... props } />;
      case 'popover':
        return <Popover { ... props } />;
      case 'qr-code':
        return <QRCode { ... props } />;
      case 'segmented':
        return <Segmented { ... props } />;
      case 'statistic':
        return <Statistic { ... props } />;
      case 'table':
        return <Table { ... props } />;
      case 'tabs':
        return <Tabs { ... props } />;
      case 'tag':
        return <Tag { ... props } />;
      case 'timeline':
        return <Timeline { ... props } />;
      case 'tooltip':
        return <Tooltip { ... props } />;
      case 'tour':
        return <Tour { ... props } />;
      case 'tree':
        return <Tree { ... props } />;
      // 反馈
      case 'alert':
        return <Alert { ... props } />;
      case 'drawer':
        return <Drawer { ... props } />;
      case 'message':
        return message.config(props);
      case 'modal':
        return <Modal { ... props } />;
      case 'notification':
        return notification.config(props);
      case 'pop-confirm':
        return <Popconfirm { ... props } />;
      case 'progress':
        return <Progress { ... props } />;
      case 'result':
        return <Result { ... props } />;
      case 'skeleton':
        return <Skeleton { ... props } />;
      case 'spin':
        return <Spin { ... props } />;
      case 'watermark':
        return <Watermark { ... props } />;
      // 其他
      case 'affix':
        return <Affix { ... props } >{ props?.children }</Affix>;
      case 'app':
        return <App { ... props } />;
      case 'config-provider':
        return <ConfigProvider { ... props } />;
      // 自定义组件
      case 'icon-font':
        return <IconFont { ... props } />;
      case 'icon-font-select':
        return <IconFontSelect { ... props } />;
      case 'draggable-modal':
        return <DraggableModal { ... props } />;
      default:
        throw new Error('Not Support type: ' + type);
    }
  }

  public renderTitle(title?: string | React.ReactNode, tip?: any) {
    if (tip) {
      return <>
            <span>
              { title }&nbsp;
              <Tooltip title={ tip }>
                  <QuestionCircleOutlined />
              </Tooltip>
            </span>
      </>;
    }

    return title;
  }

  public renderHighlightNumber(value?: number): React.ReactNode {
    return <b style={ { color: 'red', margin: '0 4px 0 4px' } }>{ value }</b>;
  }
}

const autoRc = new AutoRenderComponent();

export {
  autoRc,
  AutoRenderComponent,
};